import { Form, Input, Button, message } from "antd";
import { useForm } from "antd/es/form/Form";
import { useNavigate } from "react-router-dom";
import "./index.less";

import { registerCaptcha, register } from "@api/register";

export interface RegisterUser {
    username: string;
    nickName: string;
    password: string;
    confirmPassword: string;
    email: string;
    captcha: string;
}
const layout1 = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 }
}
const layout2 = {
    labelCol: { span: 0 },
    wrapperCol: { span: 24 }
}

export function Register() {
    const navigate = useNavigate();
    const [form] = useForm();
    // 因为该方法要使用到hook变量，所以写在函数组件内部（当然可以写在外面然后传递参数，但是这样太麻烦了）
    const sendCaptcha = async () => {
        // 1.从表单域中拿到验证码(需要用到antd内置的一个useForm hooks)
        const address = form.getFieldValue('email');
        if (!address) return message.error('请输入邮箱地址');
        try {
            const resp = await registerCaptcha(address);
            message.success('发送成功');
        } catch (error: any) {
            message.error(error?.data?.message || '系统繁忙，请稍后再试');
        }
    }
    // 因为里面要使用路由跳转相关的hooks，所以也写在里面
    const onFinish = async (values: RegisterUser) => {
        console.log(values);
        if (values.password !== values.confirmPassword) return message.error('两次密码不一致');
        try {
            const resp = await register(values);
            message.success('注册成功');
            setTimeout(() => {
                navigate('/login');
            }, 1000)
        } catch (error: any) {
            message.error(error?.data?.message || "系统繁忙，请稍后重试");
        }
    }

    return <div className="register">
        <h1>聊天室系统</h1>
        <Form
            form={form}
            {...layout1}
            colon={false}
            autoComplete="off"
            onFinish={onFinish}
        >
            <Form.Item label="用户名" name="username" rules={[{ required: true, message: '请输入用户名' }]}>
                <Input />
            </Form.Item>
            <Form.Item label="昵称" name="nickName" rules={[{ required: true, message: '请输入昵称' }]}>
                <Input />
            </Form.Item>
            <Form.Item label="密码" name="password" rules={[{ required: true, message: '请输入密码' }]}>
                <Input.Password />
            </Form.Item>
            <Form.Item label="确认密码" name="confirmPassword" rules={[{ required: true, message: '请输入确认密码' }]}>
                <Input.Password />
            </Form.Item>
            <Form.Item label="邮箱" name="email" rules={[{ required: true, message: '请输入邮箱' }, { type: 'email', message: '邮箱格式不合法' }]}>
                <Input />
            </Form.Item>
            <div className="register_captcha">
                <Form.Item label="验证码" name="captcha" rules={[{ required: true, message: '请输入验证码' }]}>
                    <Input />
                </Form.Item>
                <Button type="primary" onClick={sendCaptcha}>发送验证码</Button>
            </div>

            <Form.Item {...layout2}>
                <div className="register_links">已有账号？去<a href="/login">登录</a></div>
            </Form.Item>
            <Form.Item {...layout1} label=" ">
                <Button className="register_btn" type="primary" htmlType="submit">注册</Button>
            </Form.Item>
        </Form>
    </div>
}